<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
<link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
<link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<style>
    .frist-text {
        font-size: calc(22px + 0.1vw);
        color: black;
    }

    .info-text {
        font-size: calc(14px + 0.1vw);
        color: black;
    }

    .time-text {
        font-size: calc(12px + 0.1vw);
        color: var(--geryColor);
        margin: 20px 0;
    }

    .search-main {
        margin: 0 0 5vh;
        opacity: 0;
        transition: all .3s;
    }

    /* 搜索-输入框 */
    .search-main-input {
        width: 40%;
        position: relative;
        margin: 4vh auto;
        /* padding: 3vh 30px; */
        /* background-color: #e4e4e4; */
    }

    .search-main-input input {
        background-color: transparent;
        width: 100%;
        border: 2px solid #ccc;
        padding: 10px 0 10px 40px;
        font-size: calc(16px + 0.1vw);
        color: var(--themeColor);
        transition: all .3s;
    }

    .search-main-input img {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }

    .search-main-title {
        margin: 0 0 5vh;
        font-weight: bold;
    }

    /* 搜索类型 */
    .search-main-class {
        width: 100%;
        padding: 20px;
        margin: 2vw 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .search-class-item {
        flex: 0 0 auto;
        padding: 0 20px;
        border-radius: 50px;
        font-size: calc(18px + 0.1vw);
        color: black;
        margin-right: 20px;
        border: 1px solid black;
        cursor: pointer;
    }

    .search-class-item:hover,
    .active-calss {
        background-color: var(--themeColor);
        border-color: var(--themeColor);
        color: white;
    }

    /* 搜索内容列表 */
    .search-main-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }

    .search-item {
        padding: 30px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .search-item-btn {
        margin-top: 5vh;
    }

    .search-item-btn i {
        font-size: calc(24px + 0.1vw);
        color: var(--themeColor);
        margin: 0;
        transition: all .3s;
    }

    .search-item:hover .search-item-btn i {
        margin-left: 30px;
    }

    @media screen and (max-width:1400px) {
        .search-main {
            padding: 0 20px;
            margin-top: 7rem;
        }
    }

    @media screen and (min-width:769px) and (max-width:1400px) {
        .search-main-list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media screen and (max-width:768px) {
        .search-main-input {
            width: 100%;
        }

        .search-main-list {
            grid-template-columns: repeat(1, 1fr);
        }
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{:L('search_result')}</title>
</head>

<body>
    <div class="header"></div>
    <div class="search-main">
        <div class="middle-box">
            <div class="search-main-input">
                <input type="text" placeholder="请输入关键词" maxlength="30">
                <img src="__PUBLIC__/asset/image/common/search.png" alt="">
            </div>
            <div class="search-main-title frist-text">{:L('search_result')}：</div>
            <div class="search-main-class">
                <if condition="I('cate') eq ''">
                    <div class="search-class-item active-calss">All</div>
                    <else/>
                    <div class="search-class-item">All</div>
                </if>

                <volist name="cates" id="vo">
                    <if condition="$vo['value'] eq I('cate')">
                        <div class="search-class-item active-calss" data-id="{$vo.id}">{$vo.value}</div>
                    <else/>
                        <div class="search-class-item" data-id="{$vo.id}">{$vo.value}</div>
                    </if>
                </volist>
            </div>
            <div class="search-main-list"></div>
            <div class="pagenation-main"></div>
        </div>
    </div>
    <div class="footer"></div>
</body>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script>
    $(document).ready(function () {
        let parmas = new URLSearchParams(location.search)
        if (parmas.get('word')) {
            document.title = `Search: ${parmas.get('word')}`
            $('.search-main-input input').val(parmas.get('word'))
        }
        new WOW().init()
        let pageInfo = {
            page: 1,
            pageSize: 10,
            maxPage: 5,
            total: 50,
            showPages: 5
        }
        //请求接口并配置返回数据
        let searchList = '{$posts}';
        if(searchList != ''){
            searchList = JSON.parse(searchList);
        }else{
            searchList = [];
        }

        $('.search-class-item').on('click', function(){
            var cate = $(this).text();
            if(cate == 'All'){
                window.location.href = './?word=' + parmas.get('word')
            }else{
                window.location.href = './?cate=' + cate + '&word=' + parmas.get('word')
            }

        });

        function bindInput() {
            $('.search-main-input input').on('keydown', function (e) {
                $(this).removeClass('error-input')
                if (e.key == 'Enter') {
                    let val = $(this).val().trim()
                    if (val) {
                        window.location.href = './?word=' + val
                    } else {
                        $(this).addClass('error-input').focus()
                    }
                }
            })
        }
        function bingPagenation() {
            $('.pages-item').each(function () {
                let _this = this
                let id = $(this).data('id') * 1
                $(_this).on('click', function () {
                    $(this).siblings().removeClass('now-pages-item')
                    $(this).addClass('now-pages-item')
                    pageInfo.page = id
                    // if (id == pageInfo.page) {
                    //     $(this).addClass('now-pages-item')
                    // } else {
                    //     $(this).removeClass('now-pages-item')
                    // }
                })
            })
            function nextPrev(_this, type, targetPage) {
                if (pageInfo.page == targetPage) {
                    return
                }
                pageInfo.page += type
                if (pageInfo.page == targetPage) {
                    $(_this).addClass('disable-btn')
                }
                $(_this).siblings().removeClass('disable-btn')
                let pageItem = $('.pages-item').eq(pageInfo.page - 1)
                $(pageItem).siblings().removeClass('now-pages-item')
                $(pageItem).addClass('now-pages-item')
            }
            // 设置其他功能按钮
            $('.pagenation-btn').each(function () {
                let _this = this
                let type = $(this).data('type')
                $(_this).on('click', function () {
                    switch (type) {
                        case 'next':
                            nextPrev(_this, 1, pageInfo.maxPage)
                            break;
                        case 'prev':
                            nextPrev(_this, -1, 1)
                            break;
                        default:
                            console.log('无效功能');
                            break;
                    }
                })
            })
        }
        function setPagination() {
            $('.page-info').text(pageInfo.total)
            let itemDom = ''
            for (var i = pageInfo.page; i <= pageInfo.maxPage; i++) {
                itemDom += `<div class="pages-item ${i == pageInfo.page ? 'now-pages-item' : ''}" data-id="${i}">${i}</div>`
            }
            $('.news-pagenation-pages').append(itemDom)
            setTimeout(() => {
                bingPagenation()
            }, 300);
        }
        function setList() {
            let itemDom = ""
            searchList.forEach((item, index) => {
                itemDom += `
                <a class="search-item wow fadeInUp" href="../message/?type=post&key=${item.id}">
                    <div class="search-top">
                        <div class="search-item-title frist-text">${item.title}</div>
                        <div class="search-item-time time-text">${item.time}</div>
                        <div class="search-item-info info-text">${item.info}</div>
                    </div>
                    <div class="search-item-btn">
                        <i class="iconfont icon-youjiantou-"></i>
                    </div>
                </a>`
            })
            $('.search-main-list').append(itemDom)
            $('.search-main').css('opacity', 1)
            setPagination()
        }
        setList()
        bindInput()
    })

    $(function () {
        $('.pagenation-main').load('../public-pagenation.html?maxpage={$maxpage}');
    });
</script>

</html>